<template>
	<div class="register-container">
		<img :src="src" alt="" />
		<my-input
			class="hm-input"
			v-model="user.username"
			:reg="/^1[3|4|5|6|7|8|9]\d{9}$/"
			placeholder="请输入手机号"
		/>
		<my-input
			class="hm-input"
			v-model="user.nickname"
			placeholder="请输入昵称"
		/>
		<my-input
			class="hm-input"
			v-model="user.password"
			placeholder="请输入密码"
			type="password"
		/>
		<p>
			<span>
				已有账号?
				<em @click="handelLogin">去登录</em>
			</span>
		</p>
		<van-button
			class="loginBtn"
			round
			type="primary"
			block
			size="large"
			@click="register"
			>注册</van-button
		>
	</div>
</template>

<script>
	// 引入api
	import { registerApi } from "@/api/index";
	import srcImg from "@/assets/images/u339.png";
	// 引入组件
	import MyInput from "@/components/myInput";
	export default {
		components: {
			MyInput,
		},
		data() {
			return {
				src: srcImg,
				user: {
					username: "13680638720",
					password: "123466",
					nickname: "哈哈",
				},
			};
		},
		methods: {
			handelLogin() {
				this.$router.push("/login");
			},
			// 注册
			async register() {
				const res = await registerApi(this.user);
				console.log(res);
			},
		},
	};
</script>

<style lang="less" scoped>
	.register-container {
		text-align: center;
		padding: 10px 20px;
		& > p {
			text-align: right;
			em {
				margin-left: 20px;
				color: #96a5ff;
			}
		}
		.loginBtn {
			margin-top: 25px;
		}
	}
	.hm-input {
		text-align: left;
		color: #666;
		// border: none;
		// border-bottom: 5px solid green;
		width: 100%;
		padding: 10px 0;
		margin-bottom: 50px;
	}
</style>